<template>
    <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="30%"
            :close-on-click-modal = false>
        <el-form ref="editform" :rules="rules" :model="editUser" label-width="90px">
            <el-form-item label="房间号" prop="roomId">
                <el-input v-model="editUser.roomId" disabled></el-input>
            </el-form-item>
            <el-form-item label="房间编号" prop="digit">
                <el-input v-model="editUser.digit" disabled></el-input>
            </el-form-item>
            <el-form-item label="所在楼层" prop="floor">
                <el-input v-model="editUser.floor" disabled></el-input>
            </el-form-item>
            <el-form-item label="床位数" prop="bedNumber">
                <el-input v-model="editUser.bedNumber"></el-input>
            </el-form-item>
            <el-form-item label="房间价格" prop="price">
                <el-input v-model="editUser.price"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch v-model="editUser.enabled"></el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {editUser} from '../../../../api/forth'
import {number} from 'echarts'
export default {
  name: 'ForthEditDialog',
  data: function () {
    return {
      dialogVisible: false,
      editUser: {},
      roles: [],
      imageUrl: '',
      rules: {
        bedNumber: [
          {required: number, message: '请输入正确数字', trigger: 'blur'}
        ],
        price: [
          {required: number, message: '请输入正确价格', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    show (user, roles) {
      // user和传过来的roles是同一个地址，修改会影响
      // 一般会进行克隆
      // 将对象先json字符串化，再json对象化
      this.editUser = JSON.parse(JSON.stringify(user))
      // editUser改头换面，先字符串化，再对象化，成为全新的变量
      this.roles = roles
      this.imageUrl = this.editUser.url
      this.dialogVisible = true
    },
    submit () {
      // 在提交之前作表单验证，验证数据已经全部符合规则
      this.$refs.editform.validate(flag => {
        if (flag) {
          editUser(this.editUser).then(res => {
            if (res.data === true) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              // 弹窗关闭
              this.dialogVisible = false
              // 刷新列表
              this.$emit('ok')
              // 向父组件传递消息
              // @ok="getUserList"刷新
              console.info(res)
            } else {
              console.info(res)
            }
          })
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.editUser.url = res.url
    },
    beforeAvatarUpload (file) {
    }
  },
  watch: {
    // 监听 digit 的变化
    'editUser.roomId': function (newRoomId) {
      const numPart1 = this.editUser.roomId.substring(1, 4)// 获取第二到第四位的数字部分
      const numPart2 = this.editUser.roomId.substring(1, 2)// 获取第二到第四位的数字部分
      this.editUser.digit = parseInt(numPart1)
      this.editUser.floor = parseInt(numPart2)
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/deep/ .el-upload{
    border: 1px dotted #000000;
}

</style>
